<template>
  <div class="top" id="top">
    <van-tabs v-model="active">
      <van-tab title="发布">
        <div>
          <van-form @submit="onSubmit">
            <van-field
              v-model="tradename"
              label="商品名称"
              name="tradename"
              placeholder="请输入商品标题"
              :rules="[{ required: true, message: '请输入商品标题' }]"
            />

            <van-field
              v-model="inventory"
              label="商品库存"
              name="inventory"
              placeholder="商品库存"
              :rules="[{ required: true, message: '商品库存' }]"
            />

            <van-field
              v-model="number"
              label="战令卡数量"
              name="number"
              placeholder="战令卡数量"
              :rules="[{ required: true, message: '战令卡数量' }]"
            />

            <van-field
              v-model="price"
              label="商品价格"
              name="price"
              placeholder="商品价格"
              :rules="[{ required: true, message: '商品价格' }]"
            />

            <van-field
              v-model="gameaccount"
              label="游戏账号"
              name="gameaccount"
              placeholder="游戏账号"
              :rules="[{ required: true, message: '游戏账号' }]"
            />

            <van-field
              v-model="gamecode"
              label="游戏密码"
              name="gamecode"
              placeholder="游戏密码"
              :rules="[{ required: true, message: '游戏密码' }]"
            />

            <van-field
              v-model="role"
              label="角色"
              name="role"
              placeholder="角色"
              :rules="[{ required: true, message: '角色' }]"
            />

            <van-field
              v-model="grade"
              label="等级"
              name="grade"
              placeholder="等级"
              :rules="[{ required: true, message: '等级' }]"
            />

            <van-field
              v-model="safetylevel"
              label="安全等级"
              name="safetylevel"
              placeholder="如设有安全锁,仓库密码,交易密码等,请在此输入和注明!如没有请填写'无'"
              :rules="[{ required: true, message: '安全等级' }]"
            />

            <van-uploader>
              <van-button icon="plus" type="primary">上传图片</van-button>
            </van-uploader>

            <van-field
              v-model="phone"
              label="手机号"
              name="phone"
              placeholder="请输入手机号码"
              :rules="[{ required: true, message: '手机号' }]"
            />

            <van-field
              v-model="qq"
              label="QQ号"
              name="qq"
              placeholder="请填写您能接收消息的QQ号码"
              :rules="[{ required: true, message: 'QQ号' }]"
            />

            <div style="margin: 16px">
              <van-button round block type="info" native-type="submit"
                >确认并发布</van-button
              >
            </div>
          </van-form>
        </div>
      </van-tab>
    </van-tabs>

    <!-- 表单 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 2,
      tradename: "",
      password: "",
      inventory: "",
      number: "",
      price: "",
      gameaccount: "",
      gamecode: "",
      role: "",
      grade: "",
      safetylevel: "",
      phone: "",
      qq: "",
    };
  },
  methods: {
    onSubmit(values) {
      this.$store.commit("fabu", values);
      //   console.log("提交了");
      // const vm = this;
      // vm.$router.push({ name: "/", params: { id: 10 } });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-cell {
  padding-left: 23px;
}
/deep/.van-tabs__line {
  width: 100%;
}
/deep/.van-button {
  margin-bottom: 70px;
}
/deep/.van-uploader__input-wrapper {
  position: relative;
  margin-bottom: -70px;
}
</style>